//import QtQuick 1.1
//import StarMenu 1.0

//Item {
//    id: menu10
//    property alias menuOpen: starMenu.open

//    StarMenu {
//        id: starMenu
//        anchors.fill: parent

//        starCenterVisible: false
//        shape: StarMenu.ShapeLine
//        startingRadius: -mainRect.width/2+32
//        radiusIncrement: 10
//        startingAngle: 0
//        center.x: mainRect.x + (mainRect.width>>1)
//        center.y: mainRect.y + (mainRect.height>>1)-10


//        StarItem {
//            id: si1; width: 64; height: 64
//            onHoverItem: { animate.complete(); animate.running = false; animate.tg = si1;   animate.start() }
//            onLeaveItem: { animate.complete(); }
//            Image { anchors.fill: parent; fillMode: Image.Stretch; smooth: true; source: "qt.png" }
//        }
//        StarItem {
//            id: si2; width: 64; height: 64
//            onHoverItem: { animate.complete(); animate.running = false; animate.tg = si2;   animate.start() }
//            onLeaveItem: { animate.complete(); }
//            Image { anchors.fill: parent; fillMode: Image.Stretch; smooth: true; source: "0001.png" }
//        }
//        StarItem {
//            id: si3; width: 64; height: 64
//            onHoverItem: { animate.complete(); animate.running = false; animate.tg = si3;   animate.start() }
//            onLeaveItem: { animate.complete(); }
//            Image { anchors.fill: parent; fillMode: Image.Stretch; smooth: true; source: "0002.png" }
//        }
//        StarItem {
//            id: si4; width: 64; height: 64
//            onHoverItem: { animate.complete(); animate.running = false; animate.tg = si4;   animate.start() }
//            onLeaveItem: { animate.complete(); }
//            Image { anchors.fill: parent; fillMode: Image.Stretch; smooth: true; source: "0003.png" }
//        }
//        StarItem {
//            id: si5; width: 64; height: 64
//            onHoverItem: { animate.complete(); animate.running = false; animate.tg = si5;   animate.start() }
//            onLeaveItem: { animate.complete(); }
//            Image { anchors.fill: parent; fillMode: Image.Stretch; smooth: true; source: "0004.png" }
//        }

//        SequentialAnimation {
//            id: animate
//            property variant tg
//            property real starty
//            loops: Animation.Infinite
//            running: false

//            onTgChanged: if (!running) starty=tg.y

//            NumberAnimation { target: animate.tg; property: "y"; easing.type: Easing.OutSine; to: animate.starty-20; duration: 250 }
//            NumberAnimation { target: animate.tg; property: "y"; easing.type: Easing.InSine; to: animate.starty; duration: 250 }
//        }

//    } // starMenu

//}




import QtQuick 1.1
import StarMenu 1.0

// with a single SequentialAnimation like the above commented code unfortunately I didn't get it to work.
// So I did one SequentialAnimation for each StarItem

Item {
    id: menu10
    property alias menuOpen: starMenu.open

    StarMenu {
        id: starMenu
        anchors.fill: parent

        starCenterVisible: false
        shape: StarMenu.ShapeLine
        startingRadius: -mainRect.width/2+32
        radiusIncrement: 10
        startingAngle: 0
        center.x: mainRect.x + (mainRect.width>>1)
        center.y: mainRect.y + (mainRect.height>>1)-10

        function setStartAnimPosition()
        {
            animate1.starty = si1.y;
            animate2.starty = si2.y;
            animate3.starty = si3.y;
            animate4.starty = si4.y;
            animate5.starty = si5.y;
        }

        onCenterChanged: if (open) setStartAnimPosition();
        onOpenChanged: if (open) setStartAnimPosition();

        StarItem {
            id: si1; width: 64; height: 64
            onHoverItem: animate1.start()
            onLeaveItem: { animate1.complete(); animate1.stop(); si1.y=animate1.starty; }
            Image {id: img; anchors.fill: parent; fillMode: Image.Stretch; smooth: true; source: "qt.png" }
            StarMenu {
                id: subMenu
                anchors.fill: parent
                starCenterVisible: false
                shape: StarMenu.ShapeLine
                visualParent: main
                parentVisible: true
                radiusIncrement: 0
                startingAngle: 90
                startingRadius: 64
                StarItem {
                    width: 150; height: 30
                    Behavior on x  { NumberAnimation { easing.amplitude: 0.3; duration: 500; easing.type: Easing.OutBounce } }
                    Behavior on y  { NumberAnimation { easing.amplitude: 0.3; duration: 500; easing.type: Easing.OutBounce } }
                    Behavior on opacity  { NumberAnimation { duration: 500 } }

                    SMbutton {
                        anchors.fill: parent
                        text: "item 1"
                    }
                }
                StarItem {
                    width: 150; height: 30
                    Behavior on x  { NumberAnimation { easing.amplitude: 0.3; duration: 500; easing.type: Easing.OutBounce } }
                    Behavior on y  { NumberAnimation { easing.amplitude: 0.3; duration: 500; easing.type: Easing.OutBounce } }
                    Behavior on opacity  { NumberAnimation { duration: 500 } }

                    SMbutton {
                        anchors.fill: parent
                        text: "item 2"
                    }
                }
                StarItem {
                    width: 150; height: 30
                    Behavior on x  { NumberAnimation { easing.amplitude: 0.3; duration: 500; easing.type: Easing.OutBounce } }
                    Behavior on y  { NumberAnimation { easing.amplitude: 0.3; duration: 500; easing.type: Easing.OutBounce } }
                    Behavior on opacity  { NumberAnimation { duration: 500 } }

                    SMbutton {
                        anchors.fill: parent
                        text: "item 3"
                    }
                }
                StarItem {
                    width: 150; height: 30
                    Behavior on x  { NumberAnimation { easing.amplitude: 0.3; duration: 500; easing.type: Easing.OutBounce } }
                    Behavior on y  { NumberAnimation { easing.amplitude: 0.3; duration: 500; easing.type: Easing.OutBounce } }
                    Behavior on opacity  { NumberAnimation { duration: 500 } }

                    SMbutton {
                        anchors.fill: parent
                        text: "item 4"
                    }
                }

            }
        }

        StarItem {
            id: si2; width: 64; height: 64
            onHoverItem: animate2.start()
            onLeaveItem: { animate2.complete();  animate2.stop(); si2.y=animate2.starty; }
            Image { anchors.fill: parent; fillMode: Image.Stretch; smooth: true; source: "0009.png" }
        }
        StarItem {
            id: si3; width: 64; height: 64
            onHoverItem: animate3.start()
            onLeaveItem: { animate3.complete(); animate3.stop(); si3.y=animate3.starty; }
            Image { anchors.fill: parent; fillMode: Image.Stretch; smooth: true; source: "0014.png" }
        }
        StarItem {
            id: si4; width: 64; height: 64
            onHoverItem: animate4.start()
            onLeaveItem: { animate4.complete(); animate4.stop(); si4.y=animate4.starty; }
            Image { anchors.fill: parent; fillMode: Image.Stretch; smooth: true; source: "0007.png" }
        }
        StarItem {
            id: separator; width: 8; height: 64
            Rectangle { anchors.fill: parent; color: "#999999"; border.width: 1; border.color: "#444444"}
        }
        StarItem {
            id: si5; width: 64; height: 64
            onHoverItem: animate5.start()
            onLeaveItem: { animate5.complete(); animate5.stop(); si5.y=animate5.starty; }
            Image { anchors.fill: parent; fillMode: Image.Stretch; smooth: true; source: "0004.png" }
        }



        // StarItems animations
        SequentialAnimation {
            id: animate1
            property real starty
            loops: Animation.Infinite
            running: false
            NumberAnimation { target: si1; property: "y"; easing.type: Easing.OutSine; to: animate1.starty-20; duration: 250 }
            NumberAnimation { target: si1; property: "y"; easing.type: Easing.InSine;  to: animate1.starty; duration: 250 }
        }
        SequentialAnimation {
            id: animate2
            property real starty
            loops: Animation.Infinite
            running: false
            NumberAnimation { target: si2; property: "y"; easing.type: Easing.OutSine; to: animate2.starty-20; duration: 250 }
            NumberAnimation { target: si2; property: "y"; easing.type: Easing.InSine;  to: animate2.starty; duration: 250 }
        }
        SequentialAnimation {
            id: animate3
            property real starty
            loops: Animation.Infinite
            running: false
            NumberAnimation { target: si3; property: "y"; easing.type: Easing.OutSine; to: animate3.starty-20; duration: 250 }
            NumberAnimation { target: si3; property: "y"; easing.type: Easing.InSine;  to: animate3.starty; duration: 250 }
        }
        SequentialAnimation {
            id: animate4
            property real starty
            loops: Animation.Infinite
            running: false
            NumberAnimation { target: si4; property: "y"; easing.type: Easing.OutSine; to: animate4.starty-20; duration: 250 }
            NumberAnimation { target: si4; property: "y"; easing.type: Easing.InSine;  to: animate4.starty; duration: 250 }
        }
        SequentialAnimation {
            id: animate5
            property real starty
            loops: Animation.Infinite
            running: false
            NumberAnimation { target: si5; property: "y"; easing.type: Easing.OutSine; to: animate5.starty-20; duration: 250 }
            NumberAnimation { target: si5; property: "y"; easing.type: Easing.InSine;  to: animate5.starty; duration: 250 }
        }

    } // starMenu

}

